<template>
	<div>
        <Row :gutter="16" style="height: 45px;">
            <ICol span="6" style="line-height: 30px;">
                <router-link  v-if="$store.getters.per.wechat_manager_material_create" to="/wechat/manager/material/mpnews/"><Button type="primary">新建图文消息</Button></router-link>
            </ICol>
        </Row>
		<Row :gutter="16" class="masonry" >
        	<ICol span="24" class="item" v-for="mpnew in mpnews " :key="mpnew.id">
        		<ICol v-for="(news,index) in mpnew.news" :key="news.id" class="pd" v-bind:class="{'top': !index,'child border':index}">
        			<img v-if="!index" :src="news.pic">
                    <i v-else class="thumb" v-bind:style="{backgroundImage:'url('+news.pic+')'}"></i>
        			<div v-if="!index" class="title">{{news.title}}</div>
                    <span v-else class="child_title">{{news.title}}</span>
        		</ICol>
                <ICol span="24" class="bottomArea">
                    <ICol span="18">更新{{mpnew.created_at}}</ICol>
                    <ICol span="3">
                        <router-link v-if="$store.getters.per.wechat_manager_material_update" :to="{path:'/wechat/manager/material/mpnews/'+mpnew.id}">
                            <Icon type="md-create" size="16" ></Icon>
                        </router-link>
                    </ICol>
                    <ICol span="3"><Icon v-if="$store.getters.per.wechat_manager_material_delete" type="md-trash" size="16" @click.native="del(mpnew.id)" ></Icon></ICol>
                </ICol> 
        	</ICol>
	    </Row>
        <Row class="mt-25">
            <Page :total="total" @on-change="pageChange" :page-size="param.size"></Page>
        </Row>
	</div>
</template>
<script>
	import {Row,Col,Icon,Page,Button} from 'iview';

	export default{
		components:{
			Row,
            'ICol':Col,
            Icon,
            Page,
            Button,
        },
        data () {
            return {
            	mpnews : [],
                param :{
                    page : 1,
                    size : 20
                },
                total : 0,
            }
        },
        methods:{
        	getData(){
        		this.Axios.Wechat.Manager.Material.Mpnews.List(this.param)
                .then(res =>{
                    if(!res) return false;
                    var data = res.data;
                    this.total = data.total;
                    this.mpnews = data.list;
                })
        	},
            del(id){
                this.$Modal.confirm({
                    title: '删除确定',
                    content : '你确定要删除吗？删除后无法恢复',
                    loading: true,
                    onOk: () => {
                        this.Axios.Wechat.Manager.Material.Mpnews.Del(id)
                        .then(res =>{
                            if(!res) return false;
                            this.$Modal.remove();
                            this.getData();
                        })
                    }
                });
            },
            init(){
                this.getData();
            },
            pageChange(page){
                this.param.page = page;
                this.getData();
            }
        },
	}
</script>
<style>
    .masonry {column-count: 5;column-gap: 0;}
    @media (min-width: 500px) {
        .masonry {
            column-count: 3;
        }
    }
    @media (min-width: 1000px) {
        .masonry {
            column-count: 4;
        }
    }
    @media (min-width: 1400px) {
        .masonry {
            column-count: 5;
        }
    }
    .item {break-inside: avoid;box-sizing: border-box;padding: 10px;counter-increment: item-counter;}
	.pd{padding: 12px 15px;border-bottom: 1px solid #E4E8EB;}
    .mt-25{margin-top: 25px;}
	.border{border-bottom: 1px solid #E4E8EB;}
	.top img{width: 100%;}
	.title{color: #FFFFFF; background-color: rgba(0, 0, 0, 0.55); position: absolute; left: 9px; right: 9px; bottom: 17px; padding: 8px 12px;font-size: 16px; font-weight: 400; display: block; line-height: 1.2;}
	.thumb {float: right; margin-left: 12px; width: 60px; height: 60px; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; background-color: #F6F8F9; }
	.child{padding: 12px 15px; position: relative;display: block;line-height: 60px;}
	.child_title {overflow: hidden; font-weight: 400; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; color: #353535; }
	.bottomArea .ivu-icon{cursor: pointer;}
    .bottomArea{line-height: 35px;padding-top: 10px;}
</style>